<template>
  <div>
    <el-row class="data-lists">
      <el-col :span="9">
        <div class="data-item-one">
          <div class="item-right">
            <img class="home" src="../../assets/images/home.png" alt="">
            <!-- <div class="back1">欢迎回来 ~</div> -->
            <!-- <div class="back2">welcome back</div> -->
            <!-- <img src="../../assets/images/home.png" alt="" /> -->
          </div>
          <div class="item-left">

            <!-- 用户头像 -->
            <el-popover placement="bottom" :width="100" trigger="hover">
              <div slot="reference">
                <img class="avatar" :src="require(`@/assets/images/${getUserInfo.avatar}`)" />
                <div class="back">welcome back ~</div>
              </div>
              <div class="info">
                <div class="item">
                  <span class="type">用户名:&nbsp; </span>{{ getUsername }}
                </div>
                <div class="item">
                  <span class="type">角色:&nbsp; </span>{{ getUserInfo.role }}
                </div>

              </div>
              <!--  <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>{{ getUsername }}</el-dropdown-item>
                <el-dropdown-item>{{ getUserInfo.role }}</el-dropdown-item>
              </el-dropdown-menu> -->

            </el-popover>
          </div>

        </div>
      </el-col>
      <el-col :span="9">
        <div class="data-item-two">
          <div class="item">
            <div class="item-des flx-row">
              <img src="../../assets/images/icon1.png" alt="" />
              <div class="right">
                <div class="num">934.7w <span>29.74</span></div>
                <div class="txt">今日DAU</div>
              </div>
              <!--  -->
            </div>
          </div>
          <div class="item">
            <div class="item-des flx-row" style="margin-right: 0px">
              <img src="../../assets/images/icon2.png" alt="" />
              <div class="right">
                <div class="num">264.7w <span>29.74</span></div>
                <div class="txt">今日DAU</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-des flx-row">
              <div class="right border-right-1px">
                <div class="num">24.93w</div>
                <div class="txt">今日DAU</div>
              </div>
              <div class="right">
                <div class="num">984.52w</div>
                <div class="txt">总用户数</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-des flx-row" style="margin-right: 0px">
              <div class="right border-right-1px">
                <div class="num">84.52w</div>
                <div class="txt">GPS</div>
              </div>
              <div class="right">
                <div class="num">84.52w</div>
                <div class="txt">特权</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-item-three">
          <div class="tit">待处理</div>
          <div class="content">
            <div class="item">
              <div class="item-data" @click="goOrder">
                <div class="tit">{{ dataObj1[0]?.name }}</div>
                <div class="num">{{ dataObj1[0]?.value }} <span>条</span></div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item">
              <div class="item-data" @click="goOrder">
                <div class="tit">{{ dataObj1[1]?.name }}</div>
                <div class="num">{{ dataObj1[1]?.value }} <span>条</span></div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item">
              <div class="item-data" @click="goOrder">
                <div class="tit">{{ dataObj2[0]?.name }}</div>
                <div class="num">{{ dataObj2[0]?.value }} <span>条</span></div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item">
              <div class="item-data" @click="goOrder">
                <div class="tit">{{ dataObj2[1]?.name }}</div>
                <div class="num">{{ dataObj2[1]?.value }} <span>条</span></div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="data-echarts">
      <el-col :span="18">
        <div class="flx-row">
          <div class="echarts-data">
            <firstEcharts></firstEcharts>
          </div>
          <div class="echarts-data">
            <secondEcharts></secondEcharts>
          </div>
        </div>
        <div class="flx-row">
          <div class="echarts-data three">
            <threeEcharts></threeEcharts>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-item-three">
          <div class="tit">常用功能</div>
          <div class="content">
            <div class="item" @click="goHome">
              <div class="item-data flx-row">
                <div class="tit">
                  <i class="el-icon-s-home"></i>
                  <span>首页</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item" @click="goUser">
              <div class="item-data flx-row">
                <div class="tit">
                  <i class="el-icon-user"></i>
                  <span>用户列表</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item" @click="goGoods">
              <div class="item-data">
                <div class="tit">
                  <i class="el-icon-shopping-bag-2"></i>
                  <span>商品列表</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item" @click="goCate">
              <div class="item-data">
                <div class="tit">
                  <i class="el-icon-s-grid"></i>
                  <span>商品分类</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item" @click="goOrder">
              <div class="item-data">
                <div class="tit">
                  <i class="el-icon-s-order"></i>
                  <span>订单列表</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
            <div class="item" @click="goData">
              <div class="item-data">
                <div class="tit">
                  <i class="el-icon-s-data"></i>
                  <span>数据报表</span>
                </div>
                <i class="el-icon-arrow-right icon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class=" calendar">
          <el-calendar v-model="value">
          </el-calendar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import firstEcharts from './firstEcharts.vue'
import secondEcharts from './secondEcharts.vue'
import threeEcharts from './threeEcharts.vue'
export default {
  name: 'Home',
  components: {
    firstEcharts,
    secondEcharts,
    threeEcharts
  },
  data() {
    return {
      dataObj1: [],
      dataObj2: [],
      value: new Date()
    }
  },
  methods: {
    goHome() {
      this.$router.push({ name: 'home' })
    },
    goUser() {
      this.$router.push({ name: 'user' })
    },
    goGoods() {
      this.$router.push({ name: 'goods' })
    },
    goCate() {
      this.$router.push({ name: 'cate' })
    },
    goOrder() {
      this.$router.push({ name: 'order' })
    },
    goData() {
      this.$router.push({ name: 'report' })
    }
  },
  computed: {
    //获取用户角色信息
    getUserInfo() {
      return JSON.parse(sessionStorage.getItem('setUserInfo')) || this.$store.state.users.UserInfo
    },
    //获取用户用户名
    getUsername() {
      return localStorage.getItem('userId')
    }
  },

  async created() {
    //获取所有订单
    var orderlist = []
    const { data: res } = await this.$http.get('/order/getisPay')
    if (res.code === 200) {
      orderlist = res.data
    }
    var ispay = [] //是否付款
    var issend = [] //是否发货
    orderlist.forEach(item => {
      ispay.push(item.isPay)
      issend.push(item.isSend)
    })

    var list1 = ispay.reduce((obj, pay) => {
      if (pay === '1') {
        pay = '已付款'
      }
      if (pay === '0') {
        pay = '待付款'
      }
      if (pay === '-1') {
        pay = '未付款'
      }
      if (pay in obj) {
        obj[pay]++
      } else {
        obj[pay] = 1
      }
      return obj
    }, {})

    var list2 = issend.reduce((obj, send) => {
      if (send === true) {
        send = '已发货'
      } else {
        send = '未发货'
      }
      if (send in obj) {
        obj[send]++
      } else {
        obj[send] = 1
      }
      return obj
    }, {})
    var data1 = Object.keys(list1) //是否付款
    var data2 = Object.values(list1) //个数
    var data3 = Object.keys(list2) //是否发货
    var data4 = Object.values(list2) //个数

    for (let i = 0; i < data1.length; i++) {
      this.dataObj1.push({
        name: data1[i],
        value: data2[i]
      })
    }
    this.dataObj1 = this.dataObj1.filter(item => item.name !== '待付款')
    for (let i = 0; i < data3.length; i++) {
      this.dataObj2.push({
        name: data3[i],
        value: data4[i]
      })
    }
  },
  mounted() {}
}
</script>

<style lang="less">
/* 鼠标经过用户头像后显示的用户信息 */
.info {
  // display: flex;
  /*   align-items: center;
  justify-content: center; */
  .item {
    font-size: 14px;
    padding: 5px;
    color: #4060c7;
    text-align: left;

    .type {
      font-size: 10px;
      padding: 3px 3px;
      font-weight: 500;
      line-height: 0px;
      color: #4060c7;
      text-align: left;
      border-radius: 6px;
      background: rgba(95, 196, 255, 0.1);
    }
  }
}
.el-calendar__body {
  padding: 25px 20px 30px 20px;
}
.el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 47px;
}
//当前日期的格式
.el-calendar-table td {
  border: 0;
}
.el-calendar-table tr:first-child td {
  border-top: 0;
}
//星期日
.el-calendar-table tr td:last-child {
  color: #ff5454;
}
//星期六
.el-calendar-table tr td:nth-last-child(2) {
  color: #b1c1f2;
}
.el-calendar-table tr td:first-child {
  border-left: 0px;
}
.el-backtop,
.el-calendar-table td.is-today {
  color: #4060c7 !important;
}
.el-calendar-table td.is-selected {
  border-radius: 50%;
  color: #fff !important;
  background-color: #4060c7;
}

.el-calendar-table .el-calendar-day:hover {
  border-radius: 50%;
  background-color: #4060c7;
}
</style>
<style lang="less" scoped>
.data-lists {
  width: 100%;
  .data-item-one {
    position: relative;
    top: 0;
    left: 0px;
    background: #4060c7;
    height: 180px;
    margin-right: 10px;
    border-radius: 6px;
    color: #fff;
    .item-left {
      position: absolute;
      top: -5px;
      right: 12px;
      transform: translate(0, 20%);
      padding-right: 15px;
      .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
      }

      .avatar:hover {
        box-shadow: 0 2px 10px 0 rgba(255, 255, 255, 0.3);
        transform: translate(0, -3px);
      }
      .back {
        margin-top: 5px;
        margin-left: 4px;
        color: #fff;
        font-style: italic;
        font-size: 17px;
      }
    }
    .item-right {
      position: absolute;
      top: -30px;
      left: -87px;
      padding-left: 30px;
      font-size: 36px;

      .home {
        height: 220px;
        width: 400px;
      }

      .back2 {
        font-style: italic;
        margin-top: 6px;
        margin-left: 4px;
        font-size: 24px;
      }
    }
  }
  .data-item-two {
    display: flex;
    flex-wrap: wrap;
    height: 180px;
    margin-right: 10px;

    .item {
      height: 50%;
      width: 50%;
      .item-des {
        display: flex;
        flex-flow: row;
        align-items: center;
        margin-right: 8px;
        margin-bottom: 8px;
        background-color: #fff;
        padding: 26px;
        border-radius: 6px;

        &:nth-child(2n) {
          margin-right: 0px;
        }

        .right {
          flex: 1;
          padding-left: 22px;

          .num {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0px;

            span {
              font-size: 12px;
              color: rgba(30, 189, 94, 1);
            }
          }

          .txt {
            padding-top: 8px;
            font-size: 12px;
            font-weight: 400;

            color: rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
  .data-item-three {
    padding: 10px;
    height: 180px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;

    .tit {
      font-size: 15px;
      color: #333;
      font-weight: 700;
      padding-bottom: 5px;
    }

    .content {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
        height: 50%;

        .item-data {
          margin: 5px;
          opacity: 1;
          padding: 10px;
          border-radius: 6px;
          background: #f2f6fc;
          position: relative;

          .icon {
            position: absolute;
            right: 16px;
            top: 40%;
            color: rgba(25, 30, 36, 0.5);
            font-size: 16px;
          }

          .tit {
            font-size: 14px;
            font-weight: 400;
            // color: rgba(25, 30, 36, 0.5);
            color: #666;
            padding-bottom: 7px;
          }

          .num {
            color: #0052d9;
            font-size: 15px;
            font-weight: 700;

            span {
              color: #666;
              font-weight: 400;
              color: rgba(25, 30, 36, 0.5);
            }
          }
        }
        .item-data:hover {
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          margin-top: 3px;
        }
      }
    }
  }
  .border-right-1px {
    border-right: 1px solid #eae3e3;
  }
}
.data-echarts {
  .flx-row {
    display: flex;
    flex-flow: row;
    align-items: center;
    .echarts-data {
      flex: 1;
      height: 260px;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 6px;
    }
    .three {
      height: 350px;
    }
  }
  .data-item-three {
    padding: 10px;
    height: 180px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;

    .tit {
      font-size: 15px;
      color: #333;
      font-weight: 700;
      padding-bottom: 5px;
    }

    .content {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
        height: 50%;

        .item-data {
          margin: 5px;
          opacity: 1;
          padding: 10px;
          border-radius: 6px;
          background: #f2f6fc;
          position: relative;

          .icon {
            position: absolute;
            right: 16px;
            top: 40%;
            color: rgba(25, 30, 36, 0.5);
            font-size: 16px;
          }

          .tit {
            font-size: 14px;
            font-weight: 400;
            // color: rgba(25, 30, 36, 0.5);
            color: #666;
            padding-bottom: 5px;
            span {
              margin-left: 10px;
            }
          }
        }
        .item-data:hover {
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          margin-top: 3px;
        }
      }
    }
  }
  .notice {
    width: 100%;
    height: 152px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;

    .notice-news {
      width: 100%;
      height: 100%;
      position: relative;

      img {
        width: 100%;
        object-fit: cover;
      }

      .text {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 14px;
        color: #fff;
        padding: 10px;
      }
    }
  }
  .calendar {
    height: 100px;
  }
}
</style>

